<template>
  <view>
    <block v-if="conli.length>0">
      <mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="conli"
        :height="hit" :width="wid" :showPreview="true" />
      <!-- <image :src="canvasUrl" style="width: 750rpx;" mode="widthFix"></image> -->
    </block>
  </view>
</template>

<script>
import mosoweCanvasImage from './mosowe-canvas-image/mosowe-canvas-image.vue'
import qqmapsdk from '@/util/qqmap-wx-jssdk.min.js'
export default {
  components: {
    mosoweCanvasImage,
  },
  data() {
    return {
      info: {},
      conli: [],
      img: '',
      finish: false,
      hit: 0,
      wid: 0,
      week: '',
      img: this.urlimg,
      address: '',
    }
  },
  props: {
    addresss: {
      type: String, //详细地址信息
      default: '',
    },
  },
  mounted() {
    // 本组件 生成打卡地址的位置信息图片
    // 思路 调起相机 摄像头 获取拍摄的照片，然后利用 画图组件生成图片
    // 背景大小为图片大小 ，顶部添加人物时间地址信息
    var a = new Date(),
      that = this
    var h = a.getDay() - 1
    var we = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
    this.week = we[h]
    //
    const QQMapWX = new qqmapsdk({
      key: 'KF6BZ-5SULX-U6K47-ZHTG5-MGVL5-FAB7D',
    })
    this.$api.getUserLoacation(function (e) {
      // 解析地址
      QQMapWX.reverseGeocoder({
        location: {
          latitude: e.latitude,
          longitude: e.longitude,
        },
        coord_type: 1,
        success: function (res) {
          console.log('解析地址成功')
          console.log(res)
          // 省
          // let province = res.result.ad_info.province;
          // 市
          that.address = res.result.address
          that.info = res.result
          // console.log(province);
          // _this.city = city;

          that.getPhoto()
        },
        fail: function (res) {
          uni.showToast({
            title: '定位失败',
            duration: 2000,
            icon: 'none',
          })
          console.log(res)
        },
        // complete: function(res) {
        //  console.log(res);
        // }
      })
    })
  },
  methods: {
    getPhoto() {
      var that = this
      console.log('getPhoto拍照')
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'],
        success: function (res) {
          // console.log(JSON.stringify(res.tempFilePaths));
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function (image) {
              console.log(image.width)
              console.log(image.height)
              // 固定图片750的宽，高度自动计算出来
              that.wid = 750
              that.hit = (750 / image.width) * image.height
              that.conli = [
                {
                  type: 'image',
                  content: res.tempFilePaths[0],
                  width: that.wid,
                  height: that.hit,
                  x: 0,
                  y: 0,
                  file: res.tempFilePaths[0],
                },
                {
                  type: 'text',
                  content: that.yearTime('time'),
                  x: 34,
                  y: 82,
                  size: 58,
                  color: '#ffffff',
                },
                {
                  type: 'text',
                  content: that.yearTime('time'),
                  x: 37,
                  y: 85,
                  size: 58,
                  color: '#666666',
                  globalAlpha: 0.5,
                },
                {
                  type: 'text',
                  content: that.yearTime('year'),
                  x: 192,
                  y: 82,
                  size: 32,
                  color: '#ffffff',
                },
                {
                  type: 'text',
                  content: that.yearTime('year'),
                  x: 195,
                  y: 85,
                  size: 32,
                  color: '#666666',
                  globalAlpha: 0.5,
                },
                {
                  type: 'text',
                  content: that.week,
                  x: 392,
                  y: 82,
                  size: 32,
                  color: '#ffffff',
                },
                {
                  type: 'text',
                  content: that.week,
                  x: 395,
                  y: 85,
                  size: 32,
                  color: '#666666',
                  globalAlpha: 0.5,
                },
                {
                  type: 'image',
                  content: that.img + '/mini/photoCreateIcon1.png',
                  width: 35,
                  height: 35,
                  x: 38,
                  y: 98,
                },
                // {
                // 	type: 'text',
                // 	content:that.address,
                // 	x: 94,
                // 	y: 122,
                // 	size: 28,
                // 	color: "#ffffff"
                // },
                // {
                // 	type: 'text',
                // 	content:that.address,
                // 	x: 97,
                // 	y: 125,
                // 	size: 28,
                // 	color: "#666666",
                // 	globalAlpha:0.5,
                // },
              ]
              if (that.address.length > 25) {
                // 如果地址需要两行显示
                that.conli.push(
                  {
                    type: 'text',
                    content: that.address.substring(0, 24),
                    x: 94,
                    y: 122,
                    size: 28,
                    color: '#ffffff',
                  },
                  {
                    type: 'text',
                    content: that.address.substring(0, 24),
                    x: 97,
                    y: 125,
                    size: 28,
                    color: '#666666',
                    globalAlpha: 0.5,
                  },
                  {
                    type: 'text',
                    content: that.address.substring(24, 49),
                    x: 94,
                    y: 162,
                    size: 28,
                    color: '#ffffff',
                  },
                  {
                    type: 'text',
                    content: that.address.substring(24, 49),
                    x: 97,
                    y: 165,
                    size: 28,
                    color: '#666666',
                    globalAlpha: 0.5,
                  },
                  {
                    type: 'image',
                    content: that.img + '/mini/photoCreateIcon2.png',
                    width: 35,
                    height: 35,
                    x: 38,
                    y: 185,
                  },
                  {
                    type: 'text',
                    content: uni.getStorageSync('userInfo').nick,
                    x: 97,
                    y: 212,
                    size: 28,
                    color: '#ffffff',
                  },
                  {
                    type: 'text',
                    content: uni.getStorageSync('userInfo').nick,
                    x: 100,
                    y: 215,
                    size: 28,
                    color: '#666666',
                    globalAlpha: 0.5,
                  }
                )
                // img+'
              } else {
                that.conli.push(
                  {
                    type: 'text',
                    content: that.address.substring(0, 17),
                    x: 94,
                    y: 122,
                    size: 28,
                    color: '#ffffff',
                  },
                  {
                    type: 'text',
                    content: that.address.substring(0, 17),
                    x: 97,
                    y: 125,
                    size: 28,
                    color: '#666666',
                    globalAlpha: 0.5,
                  },
                  {
                    type: 'image',
                    content: that.img + '/mini/photoCreateIcon2.png',
                    width: 32,
                    height: 32,
                    x: 38,
                    y: 152,
                  },
                  {
                    type: 'text',
                    content: uni.getStorageSync('userInfo').nick,
                    x: 97,
                    y: 172,
                    size: 28,
                    color: '#ffffff',
                  },
                  {
                    type: 'text',
                    content: uni.getStorageSync('userInfo').nick,
                    x: 97,
                    y: 175,
                    size: 28,
                    color: '#666666',
                    globalAlpha: 0.5,
                  }
                )
              }
              // .png
              setTimeout(function () {
                that.$refs.mosoweCanvasComponents.createCanvas()
              }, 400)
            },
          })
        },
        fail(e) {
          that.$emit('getPhotoFail')
          console.log(e, '调起相机失败')
        },
      })
    },

    _canvasImage(e) {
      this.$emit('getPhotoSuccess', this.info, e)
    },
    yearTime(e) {
      var a = new Date()
      var y = a.getFullYear()
      var m = a.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = a.getDate()
      d = d < 10 ? '0' + d : d

      var h = a.getHours()
      h = h < 10 ? '0' + h : h
      var mm = a.getMinutes()
      mm = mm < 10 ? '0' + mm : mm
      var s = a.getSeconds()
      s = s < 10 ? '0' + s : s

      if (e == 'year') {
        return y + '/' + m + '/' + d
      }
      if (e == 'time') {
        return h + ':' + mm
      }
      if (e == 'yearTime') {
        return y + '/' + m + '/' + d + '  ' + h + ':' + mm + ':' + s
      }
      return y + '/' + m + '/' + d
    },
  },
}
</script>

<style>
</style>
